<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>新增菜单</title>
    <link rel="stylesheet" href="/plugins/layui/css/layui.css" media="all">
    <script src="/plugins/layui/layui.js"></script>
    <script src="/plugins/layui/layui.all.js"></script>

    <script src="/common/js/common.js"></script>
    <script src="/plugins/jquery/jquery.min.js?v=1.12.4"></script>
    <script src="/common/js/my-jquery.js?v=1.0.0"></script>
</head>
<body>
<form class="layui-form" action="" style="margin-top: 20px;" id="form">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">名称</label>
            <div class="layui-input-inline">
                <input type="login" name="name" lay-verify="required" autocomplete="off" class="layui-input"
                       placeholder="名称">
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">编号</label>
            <div class="layui-input-inline">
                <input type="text" name="code" lay-verify="required" autocomplete="off" class="layui-input"
                       placeholder="编号">
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">父级id</label>
            <div class="layui-input-inline">
                <input type="type" name="parentId" lay-verify="required" autocomplete="off" class="layui-input"
                       placeholder="父级id" value="${parentId}">
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">排序</label>
            <div class="layui-input-inline">
                <input type="type" name="sort" lay-verify="required" autocomplete="off" class="layui-input"
                       placeholder="排序" value="0">
            </div>
        </div>
    </div>
    <div class="layui-form-item" style="position:absolute;left:20px;bottom:0px;">
        <button class="layui-btn layui-btn-danger" type="button" lay-submit lay-filter="form" id="submit">保存</button>
        <button class="layui-btn layui-btn-normal" type="button" id="cancel">取消</button>
    </div>
    <div>
        <div style="display:none;"><input type="text" name='' id="" value="}"></div>
        <div id="TreeDemoContainer"></div>

    </div>
        <div class="layui-input-inline">
            <input type="text" name="Text" id="Text" disabled autocomplete="off" class="layui-input" value="">
        </div>
    <script>
        loadOrgPanel($("#TreeDemoContainer"),$("#Text"),$("#id"));
        function loadOrgPanel(container, textInput, valueInput) {
            $.get(Common.ctxPath + "/depart/list.json", {}, function(response) {
                var zNodes = response.data;
                var zTreeObj = null;
                var index = layer.open({
                    type : 0,
                    area : [ '500px', '400px' ],
                    offset : 't',
                    anim : 5,
                    title : '选择组织机构',
                    content : "<ul id='_treeDemo' class='ztree'></ul>",
                    btn: ['确定','重置'],
                    success: function(layero, index){
                        debugger
                        zTreeObj = $.fn.zTree.init($("#_treeDemo"), {}, zNodes);
                        if(valueInput.val()){
                            var node = zTreeObj.getNodeByParam("id",valueInput.val());
                            zTreeObj.selectNode(node,true);
                            zTreeObj.expandNode(node, true, false);
                        }
                    },
                    yes : function(index, layero) {
                        var nodes = zTreeObj.getSelectedNodes();

                        if (nodes.length == 1) {
                            var org = nodes[0];
                            valueInput.val(org.id);
                            textInput.val(org.name);
                        }
                        layer.close(index);
                    },
                    btn2: function(index, layero){
                        valueInput.val('');
                        textInput.val('');
                        zTreeObj.cancelSelectedNode();
                    }

                });

            })
        }

    </script>
</form>
<script>
    layui.use(['form', 'jquery'], function () {
        var $ = layui.$
        var url = Common.ctxPath + '/depart/add.json';
        Common.addOrUpdateData(url, "#form", "#submit");
        $("#cancel").click(function () {
            Common.closeFrame();
        })
    })
</script>
</body>
</html>
